import React from 'react'
import { connect } from 'react-redux';
import { Icon, message, Input, Row, Col, Button, Spin, Checkbox, Popover } from 'antd'
import './bank-bill-list.scss'
import { messages, deepFullCopy } from 'share/common';
import moment from 'moment'
import bankBillListService from './bank-bill-list.service';

class TransformPage extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      records: [],
      saveButtonLoading: false,
      selectedRelations: [], // 所有被选中的数据
      selectedRelationsIds: [], // 所有被选中的已拆分的Id
      selectedRecordIds: [], // 所有被全选的record
      selectedTotal: 0, // 入账币种的被选中的总金额
      selectedOriTotal: 0 // 原币种的被选中的总金额
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.records.length > 0 && nextProps.transformType && nextProps.showTransformPage) {
      let selectedRecordIds = deepFullCopy(this.state.selectedRecordIds)
      let selectedRelationsIds = deepFullCopy(this.state.selectedRelationsIds)
      let selectedRelations = deepFullCopy(this.state.selectedRelations)
      let selectedTotal = 0
      let selectedOriTotal = 0
      let temp = deepFullCopy(nextProps.records).map((record) => {
        let splitedAmt = record.splitedAmt || 0
        let associatedAmt = record.associatedAmt || 0
        let realSplitedAmt = splitedAmt - associatedAmt
        const oriSplitedAmt = record.oriSplitedAmt || 0
        const oriAssociatedAmt = record.oriAssociatedAmt || 0
        const realOriSplitedAmt = oriSplitedAmt - oriAssociatedAmt
        let obj = {}
        let selectedRelationList = []
        let relationMap = record.relationMap || {}
        obj.amount = record.remainAmt
        obj.oriAmount = record.oriRemainAmt
        obj.oriCurCod = record.oriCurCod
        obj.status = '待拆分'
        obj.flag = 'remainAmt'
        obj.id = 'remainAmt' + record.id
        obj.atlBankTransactionId = record.id
        record.notAssociated = obj
        record.realSplitedAmt = realSplitedAmt // 入账金额币种的待拆分金额
        record.realOriSplitedAmt = realOriSplitedAmt // 原币种的待拆分金额
        // if (realSplitedAmt !== 0) {
        //   selectedRecordIds.push(record.id)
        // }
        // relationMap.NONE && relationMap.NONE.map((relation) => {
        //   if (relation.amount !== 0) {
        //     selectedRelationsIds.push(relation.id)
        //     selectedRelations.push(relation)
        //     selectedRelationList.push(relation)
        //   }
        // })
        // if (record.notAssociated.amount !== 0) {
        //   selectedRelationsIds.push(record.notAssociated.id)
        //   selectedRelations.push(record.notAssociated)
        //   selectedRelationList.push(record.notAssociated)
        // }

        record.selectedRelationList = selectedRelationList || []
        // selectedTotal = realSplitedAmt + record.remainAmt + selectedTotal
        // selectedOriTotal = realOriSplitedAmt + record.oriRemainAmt + selectedOriTotal
        return record
      })
      this.setState({
        records: temp,
        selectedRecordIds,
        selectedRelationsIds,
        selectedRelations,
        selectedTotal,
        selectedOriTotal
      })
    }
  }

  handleOnClose = () => {
    this.setState({
      selectedRecordIds: [],
      selectedRelations: [],
      selectedRelationsIds: [],
      selectedTotal: 0,
      selectedOriTotal: 0
    }, () => {
      this.props.hideSlide('transform')
    })
  }

  /**
   * 重置转因私或生成费用的金额选择页面
   */
  handleOnReset = () => {
    this.setState({
      selectedRecordIds: [],
      selectedRelations: [],
      selectedRelationsIds: [],
      selectedTotal: 0,
      selectedOriTotal: 0
    })
  }

  /**
 * 点击每块公务卡消费记录的查看明细触发
 * @param {Object} record 被点击查看明细的公务卡消费记录的整条数据
 * @param {Number} index 被点击查看明细的公务卡消费记录的这条数据的位置
 */
  hanldeOnViewDetails = (record, index) => {
    let tempRecords = deepFullCopy(this.state.records)
    if (tempRecords[index].id === record.id) {
      if (tempRecords[index].relationList && tempRecords[index].relationList.length > 0) {
        tempRecords[index].showDetails = !record.showDetails
      }
    } else {
      tempRecords.some((item, i) => {
        if (item.id === record.id) {
          if (tempRecords[i].relationList && tempRecords[i].relationList.length > 0) {
            tempRecords[i].showDetails = !record.showDetails
            return true
          }
        }
      })
    }
    this.setState({
      records: tempRecords
    })
  }

  /**
   * 格式化数字
   * @param {Number} nStr 数字
   */
  addCommas = (nStr) => {
    nStr = nStr + '';
    let x = nStr.split('.');
    let x1 = x[0];
    let x2 = x.length > 1 ? '.' + x[1] : '';
    let rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
  }

  /**
   * 全选或全不选
   */
  handleOnSelectedAll = (e, record) => {
    let selectedRecordIds = deepFullCopy(this.state.selectedRecordIds)
    let selectedRelationsIds = deepFullCopy(this.state.selectedRelationsIds)
    let selectedRelations = deepFullCopy(this.state.selectedRelations)
    let records = deepFullCopy(this.state.records)
    let allSelectedRecords = []
    let NONE = record.relationMap ? record.relationMap.NONE : []
    let newSelectedRelationsIds = NONE.map((item) => item.id)
    if (e.target.checked) {
      if (!selectedRecordIds.includes(record.id)) { // 增加全选ids里的id
        selectedRecordIds.push(record.id)
      }
      NONE.map((item) => { // 增加relations, 增加relationsListIds
        if (!selectedRelationsIds.includes(item.id)) {
          selectedRelations.push(item);
          selectedRelationsIds.push(item.id)
        }
      })
      allSelectedRecords = records.map((recordItem, index) => {
        if (recordItem.id === record.id) {
          let recordItemSelectedRelationId = recordItem.selectedRelationList.map(item => item.id)
          NONE.map((item) => {
            if (!recordItemSelectedRelationId.includes(item.id)) {
              recordItem.selectedRelationList.push(item)
            }
          })
        }
        return recordItem
      })
    } else {
      if (selectedRecordIds.includes(record.id)) { // 移除全选ids的id
        selectedRecordIds.splice(selectedRecordIds.indexOf(record.id), 1)
      }
      let tempSelectedRelationsIds = deepFullCopy(selectedRelationsIds)
      NONE.map((item) => { // 移除relations
        if (tempSelectedRelationsIds.includes(item.id)) {
          selectedRelations.some((relation, index) => {
            if (relation.id === item.id) {
              selectedRelations.splice(index, 1)
              return true
            }
          })
        }
      })
      newSelectedRelationsIds.map((item) => { // 移除relationsListIds
        if (selectedRelationsIds.includes(item)) {
          selectedRelationsIds.splice(selectedRelationsIds.indexOf(item), 1)
        }
      })
      allSelectedRecords = records.map((recordItem) => {
        if (recordItem.id === record.id) {
          let recordItemSelectedRelationId = deepFullCopy(recordItem.selectedRelationList.map(item => item.id))
          NONE.map((item) => {
            if (recordItemSelectedRelationId.includes(item.id)) {
              recordItem.selectedRelationList.splice(recordItemSelectedRelationId.indexOf(item.id), 1)
              recordItemSelectedRelationId.splice(recordItemSelectedRelationId.indexOf(item.id), 1)
            }
          })
        }
        return recordItem
      })
    }
    let selectedTotal = (selectedRelations && selectedRelations.length > 0) ? selectedRelations.map((relation) => relation.amount).reduce((total, num) => total + num) : 0
    let selectedOriTotal = (selectedRelations && selectedRelations.length > 0) ? selectedRelations.map((relation) => relation.oriAmount).reduce((total, num) => total + num) : 0
    this.setState({
      records: allSelectedRecords,
      selectedRecordIds,
      selectedRelationsIds,
      selectedRelations,
      selectedTotal,
      selectedOriTotal
    })
  }

  /**
   * 当复选框发生变化时触发
   * @param {Object} e
   * @param {Object} record
   * @param {Object} item
   */
  handleOnCheckboxChange = (e, record, item) => {
    let selectedRecordIds = deepFullCopy(this.state.selectedRecordIds)
    let selectedRelations = deepFullCopy(this.state.selectedRelations)
    let records = deepFullCopy(this.state.records)
    if (e.target.checked) {
      let recordIndex = -1
      const allSelectedRecords = records.map((recordItem, index) => {
        if (recordItem.id === record.id) {
          recordItem.selectedRelationList.push(item)
          recordIndex = index
        }
        return recordItem
      })
      if (recordIndex !== -1 && allSelectedRecords[recordIndex].selectedRelationList.length >= allSelectedRecords[recordIndex].relationMap.NONE.length) {
        selectedRecordIds.push(record.id)
      }
      let existFlag = false
      this.state.selectedRelations.some((relation) => {
        if (relation.id === item.id) {
          existFlag = true
          return true
        }
      })
      if (!existFlag) {
        selectedRelations.push(item)
      }
      let selectedTotal = (selectedRelations && selectedRelations.length > 0) ? selectedRelations.map((relation) => relation.amount).reduce((total, num) => total + num) : 0
      let selectedOriTotal = (selectedRelations && selectedRelations.length > 0) ? selectedRelations.map((relation) => relation.oriAmount).reduce((total, num) => total + num) : 0
      let selectedRelationsIds = selectedRelations.map(item => item.id)
      this.setState({
        selectedRecordIds,
        records: allSelectedRecords,
        selectedRelations,
        selectedRelationsIds,
        selectedTotal,
        selectedOriTotal
      })
    } else {
      let selectedRecordIds = deepFullCopy(this.state.selectedRecordIds)
      if (selectedRecordIds.includes(record.id)) {
        selectedRecordIds.splice(selectedRecordIds.indexOf(record.id), 1)
      }
      const allSelectedRecords = records.map((recordItem, recordIndex) => {
        if (recordItem.id === record.id) {
          recordItem.selectedRelationList.some((relationItem, relationIndex) => {
            if (relationItem.id === item.id) {
              recordItem.selectedRelationList.splice(relationIndex, 1)
              return true
            }
          })
        }
        return recordItem
      })
      let existFlag = false
      let position = null
      this.state.selectedRelations.some((relation, index) => {
        if (relation.id === item.id) {
          existFlag = true
          position = index
          return true
        }
      })
      if (existFlag) {
        selectedRelations[position] = null
      }
      let resultRelations = selectedRelations.filter((item) => item)
      let resultRelationsIds = resultRelations.map((item) => item.id)
      let selectedTotal = (resultRelations && resultRelations.length > 0) ? resultRelations.map((relation) => relation.amount).reduce((total, num) => total + num) : 0
      let selectedOriTotal = (resultRelations && resultRelations.length > 0) ? resultRelations.map((relation) => relation.oriAmount).reduce((total, num) => total + num) : 0
      this.setState({
        selectedRecordIds,
        records: allSelectedRecords,
        selectedRelations: resultRelations,
        selectedRelationsIds: resultRelationsIds,
        selectedTotal,
        selectedOriTotal
      })
    }
  }

  /**
   * 待拆分金额被勾选触发
   */
  handleOnNotAssociatedChecked = (e, line, record) => {
    console.log('e.target.checked', e.target.checked)
    console.log('line', line)
    let selectedRelations = deepFullCopy(this.state.selectedRelations)
    let selectedRelationsIds = deepFullCopy(this.state.selectedRelationsIds)
    let records = deepFullCopy(this.state.records)
    let allSelectedRecords = []
    if (e.target.checked) {
      if (!selectedRelationsIds.includes(line.id)) {
        selectedRelationsIds.push(line.id)
        selectedRelations.push(line)
      }
      allSelectedRecords = records.map((recordItem) => {
        if (recordItem.id === record.id) {
          recordItem.selectedRelationList.push(line)
        }
        return recordItem
      })
    } else {
      if (selectedRelationsIds.includes(line.id)) {
        selectedRelationsIds.splice(selectedRelationsIds.indexOf(line.id), 1)
        selectedRelations.some((relation, index) => {
          if (relation.id === line.id) {
            selectedRelations.splice(index, 1)
          }
        })
        allSelectedRecords = records.map((recordItem) => {
          if (recordItem.id === record.id) {
            recordItem.selectedRelationList.map((relationItem, relationIndex) => {
              if (relationItem.id === line.id) {
                recordItem.selectedRelationList.splice(relationIndex, 1)
              }
            })
          }
          return recordItem
        })
      }
    }
    let resultRelations = selectedRelations.filter((item) => item)
    let selectedTotal = (resultRelations && resultRelations.length > 0) ? resultRelations.map((relation) => relation.amount).reduce((total, num) => total + num) : 0
    let selectedOriTotal = (resultRelations && resultRelations.length > 0) ? resultRelations.map((relation) => relation.oriAmount).reduce((total, num) => total + num) : 0
    this.setState({
      records: allSelectedRecords,
      selectedRelations: resultRelations,
      selectedRelationsIds,
      selectedTotal,
      selectedOriTotal
    })
  }

  handleOnTransform = async () => {
    if (!this.state.selectedRelations || this.state.selectedRelations.length === 0) {
      message.error('请先选择公务卡消费明细')
      return false
    }
    const { transformType } = this.props
    if (transformType === 1) { // 生成费用
      const { selectedRelations, selectedTotal, records } = this.state
      let ids = this.state.selectedRelationsIds.filter((item) => item.indexOf('remainAmt') === -1)
      let relations = selectedRelations.filter((item) => item.flag === 'remainAmt')
      relations.map((item, index) => {
        relations[index] = {
          amount: item.amount,
          atlBankTransactionId: item.atlBankTransactionId,
          oriAmount: item.oriAmount,
          oriCod: item.oriCurCod
        }
      })
      let params = {
        ids, relations
      }
      let posCurCod = this.state.records[0].posCurCod
      this.props.setInfo(selectedRelations, selectedTotal, params, posCurCod, records, this.handleOnReset)
    } else if (this.props.transformType === 2) { // 转因私
      const { selectedRelations, selectedTotal, records } = this.state
      if (selectedTotal <= 0) {
        message.error(messages('mcd.myAccount.publicServiceCardBankBill.toBorrowError'))
        return false
      }
      let ids = this.state.selectedRelationsIds.filter((item) => item.indexOf('remainAmt') === -1)
      let relations = selectedRelations.filter((item) => item.flag === 'remainAmt')
      relations.map((item, index) => {
        relations[index] = {
          amount: item.amount,
          atlBankTransactionId: item.atlBankTransactionId,
          oriAmount: item.oriAmount,
          oriCod: item.oriCurCod
        }
      })
      let params = {
        ids, relations
      }
      let posCurCod = this.state.records[0].posCurCod
      this.props.setInfo(selectedRelations, selectedTotal, params, posCurCod, records, this.handleOnReset)
    }
  }

  render() {
    const { selectedRelationsIds } = this.state
    let records = deepFullCopy(this.state.records)
    return (
      <div>
        {records.map((record, index) => {
          let partSelected = false
          let checkBoxAllProps = {}
          let rempSelectedRelationList = record.selectedRelationList.filter((item) => item.flag !== 'remainAmt')
          let NONE = record.relationMap ? record.relationMap.NONE : []
          if (rempSelectedRelationList.length > 0 && rempSelectedRelationList.length < NONE.length) {
            partSelected = true
          }
          if (!partSelected) {
            checkBoxAllProps = {
              disabled: !record.realSplitedAmt || Number(record.realSplitedAmt) === 0,
              checked: this.state.selectedRecordIds.includes(record.id),
              style: { marginRight: '10px' },
              onChange: (e) => this.handleOnSelectedAll(e, record)
            }
          } else {
            checkBoxAllProps = {
              indeterminate: true,
              disabled: !record.realSplitedAmt || Number(record.realSplitedAmt) === 0,
              checked: false,
              style: { marginRight: '10px' },
              onChange: (e) => this.handleOnSelectedAll(e, record)
            }
          }
          return (
            <div className={'splitBlock'}>
              <div
                className={'blockHead'}
                style={{
                  height: '90px',
                  lineHeight: '30px'
                }}
              >
                <span className={'headText'}>交易金额：</span>
                <span className={'headText'}>{record.oriCurCod}</span>
                <span className={'headText'}>{this.addCommas(Number(record.oriCurAmt || '0').toFixed(2))}</span>
                <span style={{ marginRight: '5px', marginLeft: '5px' }}>|</span>
                <span className={'headText'}>入账金额：</span>
                <span className={'headText'}>{record.posCurCod}</span>
                <span className={'headText'}>{this.addCommas(Number(record.posCurAmt || '0').toFixed(2))}</span>
                <br />
                {/* <span className={'headText'}>交易金额：</span>
                <span className={'headText'}>{record.oriCurCod}</span>
                <span className={'headText'}>{this.addCommas(Number(record.oriAssociatedAmt || '0').toFixed(2))}</span>
                <span style={{ marginRight: '5px', marginLeft: '5px' }}>|</span>
                <span className={'headText'}>已处理金额：</span>
                <span className={'headText'}>{record.posCurCod}</span>
                <span className={'headText'}>{this.addCommas(Number(record.associatedAmt || '0').toFixed(2))}</span>
                <br /> */}
                <div
                  style={{
                    height: '30px',
                    width: '100%',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    marginBottom: '-30px'
                  }}
                >
                  <span className={'headText'}>{messages('mcd.myAccount.publicServiceCardBankBill.acpName')}：</span>
                  <Popover content={record.acpName} placement={'topLeft'}>
                    <span className={'headText'}>{record.acpName}</span>
                  </Popover>
                </div>
                <br />
                <span className={'headText'}>交易日期：</span>
                <span className={'headText'}>{ record.trsDate ? moment(record.trsDate).format('YYYY-MM-DD') : '-' }</span>
              </div>
              <div className={'blockContent'}>
                { (record.realSplitedAmt && Number(record.realSplitedAmt) !== 0) ? <div className={'contentHead'}>
                    {/** 公务卡消费的所有已拆分金额的checkBox */}
                    <Checkbox
                      {...checkBoxAllProps}
                    />
                    <span className={'contentHeadText'}>{messages('mcd.myAccount.publicServiceCardBankBill.splitedAmt')}：</span>
                    {record.oriCurCod === record.posCurCod ?
                      record.posCurCod
                      +' '+this.addCommas(Number(record.realSplitedAmt || '0').toFixed(2))
                      :record.oriCurCod+' '+this.addCommas(Number(record.realOriSplitedAmt || '0').toFixed(2))+' / '
                      +record.posCurCod+this.addCommas(Number(record.realSplitedAmt || '0').toFixed(2))
                    }
                    {/* <span className={'contentHeadText'}>{record.oriCurCod}</span>
                    <span className={'contentHeadText'}>{this.addCommas(Number(record.realOriSplitedAmt).toFixed(2))}</span>
                    <span style={{ marginRight: '4px' }}>/</span>
                    <span className={'contentHeadText'}>{record.posCurCod}</span>
                    <span className={'contentHeadText'}>{this.addCommas(Number(record.realSplitedAmt).toFixed(2))}</span> */}
                    {(record.relationMap && (record.relationMap.NONE && record.relationMap.NONE.length > 0)) ? record.showDetails ?
                      <Icon
                        onClick={() => this.hanldeOnViewDetails(record, index)}
                        className={'viewDetails'}
                        type="up-circle-o"
                      /> :
                      <Icon
                        onClick={() => this.hanldeOnViewDetails(record, index)}
                        className={'viewDetails'}
                        type="down-circle-o"
                      /> : null}
                    {record.relationMap && (record.relationMap.NONE && record.relationMap.NONE.length > 0) ?
                      <span
                        onClick={() => this.hanldeOnViewDetails(record, index)}
                        className={'viewDetails'}
                      >
                        {messages('mcd.myAccount.publicServiceCardBankBill.viewDetails')}
                      </span> : null
                    }
                  </div> : null
                }
                {
                  record.showDetails && <div className={'detailsContent'}>
                    {record.relationMap && record.relationMap.NONE.map((item) => {
                      return (
                        <div style={{ borderBottom: item.flag !== 'remainAmt' ? '1px solid #D7DCE6' : '0px' }} className={'detailLine'}>
                          {/** 已拆分金额的checkBox */}
                          <Checkbox
                            disabled={!['已拆分', '待拆分'].includes(item.status) || item.amount === 0}
                            checked={selectedRelationsIds.includes(item.id)}
                            style={{ marginRight: '10px' }}
                            onChange={(e) => this.handleOnCheckboxChange(e, record, item)}
                          />
                          {
                            item.flag !== 'remainAmt' ? <div className={'part'}>
                              <span className={'label'}>{messages('mcd.myAccount.publicServiceCardBankBill.splitAmt')}：</span>
                              <span className={'value'}>{record.oriCurCod} </span>
                              <span className={'value'}>{this.addCommas(Number(item.oriAmount || '0').toFixed(2))}</span>
                            </div> : <div className={'part'}>
                                <span className={'label'}>{messages('mcd.myAccount.publicServiceCardBankBill.notSplitedAmt2')}：</span>
                                <span className={'value'}>{record.oriCurCod} </span>
                                <span className={'value'}>{this.addCommas(Number(item.oriAmount || '0').toFixed(2))}</span>
                              </div>
                          }
                          {
                            item.createDate && <div className={'part'}>
                              <span className={'label'}>入账金额：</span>
                              <span className={'value'}>{record.posCurCod} </span>
                              <span className={'value'}>{this.addCommas(Number(item.amount || '0').toFixed(2))}</span>
                            </div>
                          }
                          {
                            item.flag !== 'remainAmt' && <div className={'part'}>
                              <span className={'label'}>{messages('mcd.myAccount.publicServiceCardBankBill.splitStatus')}：</span>
                              <span className={'value status'}>{item.status}</span>
                            </div>
                          }
                        </div>
                      )
                    })}
                  </div>
                }
                {(record.notAssociated.amount && Number(record.notAssociated.amount) !== 0) ? <div style={{ marginTop: record.realSplitedAmt === 0 ? '0px' : '17px' }} className={'contentHead'}>
                  {/** 待拆分金额的checkBox */}
                  <Checkbox
                    disabled={!record.notAssociated.amount || Number(record.notAssociated.amount) === 0}
                    checked={selectedRelationsIds.includes(record.notAssociated.id)}
                    style={{ marginRight: '10px' }}
                    onChange={(e) => this.handleOnNotAssociatedChecked(e, record.notAssociated, record)}
                  />
                  <span className={'contentBottomText'}>{messages('mcd.myAccount.publicServiceCardBankBill.notSplitedAmt2')}：</span>
                  {record.oriCurCod === record.posCurCod ?
                      record.posCurCod
                      +' '+this.addCommas(Number(record.notAssociated.amount || '0').toFixed(2))
                      :record.oriCurCod+' '+this.addCommas(Number(record.notAssociated.oriAmount || '0').toFixed(2))+' / '
                      +record.posCurCod+this.addCommas(Number(record.notAssociated.amount || '0').toFixed(2))
                    }
                  {/* <span className={'contentBottomText'}>{record.oriCurCod}</span>
                  <span className={'contentBottomText'}>{this.addCommas(Number(record.notAssociated.oriAmount).toFixed(2))}</span>
                  <span className={'contentBottomText'} style={{ marginRight: '4px' }}>/</span>
                  <span className={'contentBottomText'}>{record.posCurCod}</span>
                  <span className={'contentBottomText'}>{this.addCommas(Number(record.notAssociated.amount).toFixed(2))}</span> */}
                </div> : null}
              </div>
            </div>
          )
        })}
        <div className="slide-footer">
          <span className={'totalText'}>
            {messages('mcd.myAccount.publicServiceCardBankBill.total')}
            {records.length > 0 && <span style={{ color: '#FA6478', fontSize: '12px' }}>{records[0].oriCurCod} </span>}
            <span style={{ color: '#FA6478' }}>{this.addCommas(this.state.selectedOriTotal.toFixed(2))}</span>
            <span style={{ color: '#FA6478', fontSize: '12px' }}>/</span>
            {records.length > 0 && <span style={{ color: '#FA6478', fontSize: '12px' }}>{records[0].posCurCod} </span>}
            <span style={{ color: '#FA6478' }}>{this.addCommas(this.state.selectedTotal.toFixed(2))}</span>
          </span>
          <Button
            onClick={() => this.handleOnTransform()}
            loading={this.state.saveButtonLoading}
            type="primary"
            htmlType="submit"
          >
            {messages('supplier.key103')}
          </Button>
          <Button onClick={() => this.handleOnClose()}>{messages('common.cancel')}</Button>
        </div>
      </div>
    )
  }
}

TransformPage.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    company: state.login.company,
    user: state.login.user,
    loginUser: state.login.loginUser
  };
}
export default connect(mapStateToProps)(TransformPage);
